<template>
  <div class="container a2cbox" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box query-boxstudent">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.codeType" placeholder="请输入内容">
                <template slot="prepend">字典类型</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.codeTypeName" placeholder="请输入内容">
                <template slot="prepend">类型名称</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('新增')"
        perms="systemManage:dictionaryType:add"
        type="primary"
        @click="addType"
        style="float:left;"
      />
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        DictionaryType
        class="table-width"
        permsEdit="systemManage:dictionaryType:edit"
        width="400"
        permsSee='true'
        @handleSee='handleSee'
        @handleEdit="handleEdit"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
      ></Crm-table>
    </div>
    <!-- 编辑 -->
    <el-dialog
      title="编辑"
      width="30%"
      :visible.sync="EidtPop"
      class="EidtPop"
      :close-on-click-modal="false"
     
    >
      <el-row>
        <el-col :span="5">
          <span>ID</span>
        </el-col>
        <el-col :span="16">
          {{ dataForm.id }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>type</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="dataForm.codeType" disabled="true" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>name</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="dataForm.codeTypeName" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>

      <el-button @click="EidtPop = false">取 消</el-button>
      <el-button type="primary" @click="Submit">保存</el-button>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog
      title="新增"
      width="30%"
      :visible.sync="AddPop"
      class="EidtPop"
      :close-on-click-modal="false"

    >
      <el-row>
        <el-col :span="5">
          <span>type</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="addDataForm.codeType" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>name</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="addDataForm.codeTypeName" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>

      <el-button @click="AddPop = false">取 消</el-button>
      <el-button type="primary" @click="SubmitAddPop">保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import Cookies from "js-cookie";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
import store from "@/store";
import { isMobile } from "@/utils/validate";
import { mapActions } from "vuex";
import CrmPermsBox from "@/views/Core/Crmpermsbox";

export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch,
    CrmPermsBox
  },
  data() {
    return {
      loading: false,
      EidtPop: false,
      AddPop:false,
      queryBox: {
        
      },
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "id", label: "ID", minWidth: 100 },
        { prop: "codeType", label: "字典类型", minWidth: 100 },
        { prop: "codeTypeName", label: "类型名称", minWidth: 120 }
      ],
      pageResult: {
        content: []
      },
      dataForm: {},
      addDataForm:{},
      disabled:Boolean
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.pageRequest = Object.assign({}, this.pageRequest, this.queryBox);
      this.$api.agent
        .DictionaryTypeList(this.pageRequest)
        .then(res => {
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;

          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },

    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.codeTypeName = "";
      this.queryBox.codeType = "";
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 编辑
    handleEdit: function(params) {
      this.dataForm = Object.assign({}, params.row);
      this.EidtPop = true;
    },
    // 查看
    handleSee(params){
        this.$router.push({
        path: "/SystemManage/DictionaryData",
        query: {
          codeType: params.row.codeType
        }
      });
    },
    addType(){
      this.AddPop = true;
    },
    // 编辑保存
    Submit() {
      this.$api.agent.DictionaryTypeListUpdateCodeType(this.dataForm).then(res => {
        if (res.result == 1) {
          this.$message({
            message: '编辑成功',
            type: "success"
          });
          this.EidtPop=false
          this.findPage(null)
        } else {
          this.$message({
            message:'错误',
            type: "error"
          });
        }
      });
    },
    SubmitAddPop(){
      this.$api.agent.DictionaryTypeListSave(this.addDataForm).then(res => {
        if (res.result == 1) {
          this.$message({
            message: '保存成功',
            type: "success"
          });
          this.AddPop=false
          this.findPage(null)
          this.addDataForm={}
        } else {
          this.$message({
            message:'错误',
            type: "error"
          });
        }
      });
    }
  },

  mounted() {
    this.findPage(null);
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss">
.a2cbox {
  .el-table--mini th {
    padding: 5px 0 !important;
  }
  .btn .el-table--mini td {
    padding: 5px 0 !important;
  }
}
</style>
<style lang="scss">
.a2cbox {
  .el-table--mini th {
    padding: 5px 0 !important;
  }
  .btn .el-table--mini td {
    padding: 5px 0 !important;
  }
}
.EidtPop {
  .el-row {
    margin: 20px 0;
    span {
      margin-top: 9px;
      display: inline-block;
    }
  }
}
</style>
